<!--
 * @Description: 无限嵌套菜单组件
 * @Author: liushuang
 * @Date: 2022-04-14 11:09:45
 * @LastEditTime: 2022-10-08 17:41:07
-->
<template>
  <template
    v-if="item.children && item.children.length === 1 && !item.alwaysShow"
  >
    <el-menu-item
      :index="item.children[0].fullPath"
      :class="{ round: item.meta.round }"
    >
      <i
        class="mdi sidebarIcon"
        :class="item.children[0].meta.icon"
        v-if="item.children[0].meta.icon && !item.children[0].meta.round"
      ></i>
      <template #title>
        <span>{{ item.children[0].meta.title }}</span>
      </template>
      <i
        class="mdi sidebarIcon"
        :class="item.children[0].meta.icon"
        v-if="item.children[0].meta.icon && item.children[0].meta.round"
      ></i>
    </el-menu-item>
  </template>
  <template v-else-if="item.children">
    <el-sub-menu :index="props.index" :show-timeout="0" :hide-timeout="200">
      <template #title>
        <i
          class="mdi sidebarIcon"
          :class="item.meta.icon"
          v-if="item.meta.icon"
        ></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <SidebarItem
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      ></SidebarItem>
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item :index="item.fullPath" :class="{ round: item.meta.round }">
      <template #title>
        <i
          class="mdi sidebarIcon"
          :class="item.meta.icon"
          v-if="item.meta.icon && !item.meta.round"
        ></i>
        <span>{{ item.meta.title }}</span>
        <i
          class="mdi sidebarIcon"
          :class="item.meta.icon"
          v-if="item.meta.icon && item.meta.round"
        ></i>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import { defineProps } from 'vue'

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
    required: true
  },
  index: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="scss">
.sidebarIcon {
  margin-right: 11px;
  margin-left: 3px;
  font-size: 16px;
  color: #cad1dc;
}
.el-menu.el-menu--inline .el-menu-item {
  padding-left: 50px !important;
}
.el-sub-menu .el-sub-menu ::v-deep .el-sub-menu__title{
  padding-left: 50px !important;
}
::v-deep .el-sub-menu__icon-arrow {
  color: #fff;
}

.el-menu-item.round {
  z-index: 1;
  position: relative;
  padding-left: 75px !important;
  .sidebarIcon{
    margin-right: 0;
    margin-left: 15px;
  }
  &::after {
    position: absolute;
    content: '';
    top: 50%;
    left: -1px;
    bottom: 0;
    right: 5px;
    transform: translateY(-50%);
    border: 1px solid #8191ae;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    z-index: -1;
    height: 48px;
    transition: all 0.2s;
  }
  &::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 130px;
    height: 36px;
    background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 49%,
      transparent 50%,
      transparent 100%
    );
  }
}
.el-menu-item.round.is-active {
  background: transparent;
  &::after {
    background: rgba(89, 103, 130, 0.5);
  }
}
.el-menu-item.is-active {
  background: #637497;
  // background: rgba(0,0,0,0.4);
  // background: #5470c6;
  // background: rgba(91, 161, 247, 0.9);
}
</style>
